<template>
	<div id="myChart" :style="{width: '800px', height: '600px'}">
	</div>
</template>

<script>
import axios from "axios";

export default {
	name: 'Echarts',
	mounted(){
		
		axios.get('http://localhost:8181/fruit/barvo').then(res => {
			
			// 基于准备好的dom，初始化echarts实例
			let myChart = this.$echarts.init(document.getElementById('myChart'))
			// 绘制图表
			myChart.setOption({
				title: {
					text: '水果销量统计',
					left: 'center',
					top: 20,
					textStyle: {
						color: '#555555'
					}
				},
				tooltip: {},
				xAxis: {
					data: res.data.names
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					data: res.data.values
				}]
			});
		})
	}
}
</script>
